<template>
  <div class="app-container">
    <search @seach="seach" :searchtype="5"></search>
    <div class="table-box">
      <a class="exportdocument" href="/api/v1/service/exportBillOfAnnualfee?export=1"><i class="el-icon-document"></i>导出报表</a>
      <Tables :data="list" :listLoading="listLoading" :tableTitle="tableTitle" :operationtype="operationtype" ></Tables>
      <Pagations :totalCount="totalCount" @changePage="changePage"></Pagations>
    </div>
  </div>
</template>

<script>
  import { queryBillOfAnnualfee } from '@/api/list'
  import search from  '../devicetable/search'
  import Pagations from '@/components/pagations'
  import pagationdata from '@/mixins/pagations'
  import Tables from  '@/components/table'
  export default {
    mixins: [pagationdata],
    name:'OverSpeed',
    data() {
      return {
        operationtype:0,
        tableTitle:[{
          title:'手机号',
          prop:'telephone',
          width:'180px'
        },{
          title:'使用人',
          prop:'userName'
        }, {
          title:'设备编号',
          prop:'trackerId',
          width:'200px'
        },{
          title:'通信卡号',
          prop:'iccid',
          width:'230px'
        },{
          title:'IMEI号',
          prop:'imei',
          width:'200px'
        }, {
          title:'缴费日期',
          prop:'createTimeStr',
          width:'180px'
        },{
          title:'金额',
          prop:'money'
        },{
          title:'开票状态',
          prop:'isInvoicedStr',
          width:'180px'
        },{
          prop: "remainDays",
          title: "剩余服务时间(天)",
          width:'180px',
          render: function(h, param) {
            let html = "";
            if (param.row.remainDays <0) {
              html = 0;
            } else {
              html = param.row.remainDays;
            }
            return html;
          }
        }]
      }
    },
    components:{
      search,
      Pagations,
      Tables
    },
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'gray',
          deleted: 'danger'
        }
        return statusMap[status]
      }
    },
    created() {
      this.fetchData(this.listQuery)
    },
    methods: {
      seach(data){
        this.formline=data
        this.fetchData(data)
      },
      changePage: function(val) {
        this.fetchData({
          pageSize: 10,
          currentPage: val,
          ...this.formline
        })
      },
      fetchData(data) {
        this.listLoading = true
        queryBillOfAnnualfee(data).then(response => {
          if(response && response.body){
            this.list = response.body.recordList
            this.totalCount = response.body.totalCount
          }else {
            this.list = []
            this.totalCount = 0
          }
          this.listLoading = false
        })
      }
    }
  }
</script>
